<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 是否是修改的判断
 *
 * @type {boolean}
 */
let isEdit = false

/**
 * 角色值
 *
 * @type {*[]}
 */
let roleOptions = []

/**
 * 账户数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {accountBrowser: string, accountIPAddress: string, accountEmail: string, accountPhone: string, accountCreateTime: string, accountNo: string, accountRoleName: string, accountRoleNo: string, accountCountNumber: string, accountCreateMan: string, accountOSName: string}, formVisible: boolean, accountNo: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const accountData = reactive({
    accountNo: '',
    tableData: [],
    total: 0,
    pageSize: 4,
    pageNum: 1,
    formVisible: false, // 是否显示弹窗
    form: {
        accountNo: '',
        accountRoleNo: '',
        accountRoleName: '',
        accountPhone: '',
        accountEmail: '',
        accountPhoto: '',
        accountCreateMan: '',
        accountCreateTime: '',
        accountBrowser: '',
        accountIPAddress: '',
        accountOSName: '',
        accountCountNumber: '',
    }
})

/**
 * 加载账户
 */
const loadAccount = () => {
    request.get(`/api/admin/find-account-page`, {
        params: {
            pageNum: accountData.pageNum,
            pageSize: accountData.pageSize,
            accountNo: accountData.accountNo,
        }
    }).then(res => {
        accountData.tableData = res.data?.list || []
        accountData.total = res.data?.list.map(item => item.accountCountNumber)[0] || 0;
    })
}
// 调用账户加载方法，获取后台数据
loadAccount()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadAccount()
}

/**
 * 重置
 */
const reset = () => {
    accountData.accountNo = ''
    // 重置时，重新加载数据即可
    loadAccount()
}

/**
 * 新增账户
 */
const addAccount = () => {
    isEdit = false
    // 清空上次残留的数据
    accountData.form = {}
    accountData.formVisible = true
}

/**
 * 提交新增的账户
 */
const submitAddAccount = () => {
    if (account.accountRoleName === 'visitor-admin') {
        ElMessage.info("游客-管理员仅可以查看信息")
    } else {
        accountData.form.accountCreateMan = account.accountNo
        request.post(`/api/admin/add-account`, accountData.form).then(res => {
            if (res.code === "200") {
                // 重新获取数据
                loadAccount()
                // 关闭弹窗
                accountData.formVisible = false
                ElMessage.success("新增成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 删除账户
 *
 * @param accountNo 账号
 */
const deleteAccount = (accountNo) => {
    ElMessageBox.confirm("删除数据后无法恢复，您确认删除此条数据？", "删除确认", {type: 'warning'}).then(() => {
        if (account.accountRoleName === 'visitor-admin') {
            ElMessage.info("游客-管理员仅可以查看信息")
        } else {
            request.delete(`/api/admin/delete-account/${accountNo}`).then(res => {
                if (res.code === "200") {
                    // 重新获取数据
                    loadAccount()
                    ElMessage.success("删除成功")
                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    }).catch(() => {
        ElMessage({
            type: "info",
            message: "取消删除",
        })
    })
}

/**
 * 加载角色
 */
const loadRole = () => {
    request.get(`/api/role/find-role`, {
        params: {
            orderClassAdminNo: account.accountNo
        }
    }).then(res => {
        roleOptions = res.data
    })
}
// 调用专业加载方法，获取后台数据
loadRole()
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="accountData.accountNo"
                      placeholder="请输入账号查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadAccount" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-button @click="addAccount" type="primary" style="margin-bottom: 10px;">新增</el-button>
            </div>
            <div>
                <el-table :data="accountData.tableData" style="width: 100%">
                    <el-table-column prop="accountPhoto" label="头像">
                        <template #default="scope">
                            <el-image v-if="scope.row.accountPhoto"
                                      :src="scope.row.accountPhoto || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"
                                      :preview-src-list="[scope.row.accountPhoto]"
                                      style="width: 40px; height: 40px; border-radius: 5px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="accountNo" label="账号"/>
                    <el-table-column prop="accountRoleName" label="角色"/>
                    <el-table-column prop="accountPhone" label="手机号"/>
                    <el-table-column prop="accountEmail" label="电子邮箱"/>
                    <el-table-column prop="accountCreateMan" label="创建人"/>
                    <el-table-column prop="accountCreateTime" label="创建时间"/>
                    <el-table-column prop="accountUpdateMan" label="更新人"/>
                    <el-table-column prop="accountUpdateTime" label="更新时间"/>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="deleteAccount(scope.row.accountNo)" type="danger" size="small"
                                       plain>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="accountData.pageNum"
                           v-model:page-size="accountData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="accountData.total"/>
        </div>

        <el-dialog v-model="accountData.formVisible" :close-on-click-modal="false" title="账号信息">
            <el-form :model="accountData.form" label-width="100px" label-position="right"
                     style="padding-right: 30px;" v-if="isEdit === false">
                <el-form-item label="账号">
                    <el-input placeholder="请输入账号" v-model="accountData.form.accountNo"
                              :maxlength="20" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input show-password placeholder="请输入密码" v-model="accountData.form.accountPassword"
                              autocomplete="off"
                              :maxlength="20"></el-input>
                </el-form-item>
                <div class="block" style="margin-bottom: 20px; margin-left: 45px">
                    <el-select
                            v-model="accountData.form.accountRoleNo"
                            class="m-2"
                            placeholder="请选择角色"
                            style="width: 525px"
                    >
                        <el-option
                                v-for="item in roleOptions"
                                :key="item.roleNo"
                                :label="item.roleName"
                                :value="item.roleNo"
                        />
                    </el-select>
                </div>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="accountData.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAddAccount" v-if="isEdit === false">提交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>

</style>